<template>
  <div class="app-container">
    <!-- 新增信息 -->
    <el-form
      class="add-vip-form"
      ref="vipForm"
      :rules="rules"
      :model="form"
      label-width="80px"
    >
      <el-form-item prop="vip" label="VIP等级">
        <el-select v-model="form.vip" @change="getAllVipInfo" placeholder="请选择VIP等级">
          <el-option
            v-for="item in vipOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员">
        <el-transfer
          filterable
          v-model="vipValue"
          :titles="vipTitles"
          :button-texts="['删除', '添加']"
          :data="vipData"
        >
          <template v-slot:default="{ option }">
            <span>
              {{ option.label }}
            </span>
          </template>
        </el-transfer>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-left: 20px;" @click="addVip">确定</el-button>
  </div>
</template>

<script>
import { addVip,getAllVipInfo } from "@/api/vip";
export default {
  name: "Vip",
  data() {
    return {
      // vip
      model: "",
      form: {
        vip: "",
      },
      rules: {
        vip: [{ required: true, message: "请选择VIP等级", trigger: "change" }],
      },
      vipOptions: [
        { value: 1, label: "VIP1" },
        { value: 2, label: "VIP2" },
        { value: 3, label: "VIP3" },
      ],
      vipData: [
        // { key: 1, label: "1-张三" },
        // { key: 2, label: "2-李四" },
        // { key: 3, label: "3-王五" },
        // { key: 4, label: "4-赵六" },
        // { key: 5, label: "5-孙七" },
        // { key: 6, label: "6-周八" },
      ],
      vipValue: [],
    };
  },
  computed: {
    vipTitles() {
      let vipList = ["所有会员"];
      if(this.form.vip){
        vipList.push(`v${this.form.vip}会员`);
      }else{
        vipList.push(`会员`);
      }
      return vipList;
    },
  },
  mounted () {
    // this.getAllVipInfo();
  },
  methods: {
    addVip() {
      this.$refs.vipForm.validate((valid) => {
        if (valid) {
          const params = {
            currentVipLevel: this.form.vip,
            selectedIds: this.vipValue
          }
          console.log('params',params);
          addVip(params).then(res => {
            console.log('res',res);
            this.$message.success('添加成功');
          }).catch(err => {
            console.log('err',err);
            this.$message.error('添加失败');
          }).then()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getAllVipInfo(){
      getAllVipInfo(this.form.vip).then(res => {
        this.vipData = res.data.patients;
        this.vipValue = res.data.vipList;
      }).catch(err => {
        console.log('err',err);
      })
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  .add-vip-form {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>
